<template>
    <!-- 订单明细 -->
    <scroll-view scroll-y="true">
        <view v-for="value,key in shoppingList.detail" class="dish-item-line" :key="key">
            <b class="dish-name">{{key}}</b>
            <view class="dish-info">
                <text>￥{{value.price.toFixed(2)}}</text>
                <text>×{{value.count}}</text>
            </view>
        </view>
    </scroll-view>
    <!-- 订单备注 -->
    <view class="remark" @click="changeRemark">
        <!-- 备注显示区域 -->
        <textarea 
            placeholder="点击修改备注"
            placeholder-style="color:white"
            v-model="remark.content"
            class="remark-screen"
            disabled
        />
        <!-- 修改备注弹出层组件 -->
        <Popup ref="message">
            <view class="popup-top-bar">
                <TextButton @click="cancelModify" class="popup-cancel-button">取消</TextButton>
                <TextButton @click="submitModify" class="popup-ok-button-allowed">确定</TextButton>
            </view>
            <!-- 备注修改区域 -->
            <textarea 
                v-model="remarkCache" 
                placeholder="在此输入备注"
                maxlength="-1"
                class="remark-modify"
                auto-focus
            />
        </Popup>
    </view>
    <!-- 底栏 -->
    <view class="bar">
        <TextButton @click="goBack" :class="['return-button','bar-button']">返回</TextButton>
        <TextButton @click="submitOrder(allowStatus)" :class="['order-button','bar-button']">下单</TextButton>
    </view>
</template>

<script lang="ts" setup>
import axios from 'axios';
import {ref, type Ref} from 'vue';
import {useRouter} from 'vue-router';
//导入文本按钮组件
import TextButton from '../components/common/TextButton.vue';
//导入弹出层组件
import Popup from '../components/common/Popup.vue';
//使用全局状态-购物清单、备注、订单信息、配置、库存信息、订单缓存
import { useListStore } from '../stores/list';
import { useRemarkStore } from '../stores/remark';
import { useDetailStore } from '../stores/detail';
import { useConfigStore } from '../stores/config';
import { useBankStore,type BankInfo } from '../stores/bank';
import { useCacheStore } from '../stores/cache';
const shoppingList=useListStore();
const remark=useRemarkStore();
const orderInfo=useDetailStore();
const config=useConfigStore();
const bankInfo=useBankStore();
const orderCache=useCacheStore();
//注册使用路由
const router=useRouter();
//声明响应式状态备注缓存
const remarkCache=ref<string>(remark.content);
//注册备注模板引用
type Remark=InstanceType<typeof Popup>;
const message=ref<Remark>();
//封装关闭备注弹出框方法
function closePopup():void{
    (message as Ref<Remark>).value.close();
}
//定义修改备注回调函数
function changeRemark():void{
    (message as Ref<Remark>).value.open();
}
//定义确定按钮回调函数
function submitModify():void{
    remark.update(remarkCache.value);
    closePopup();
}
//定义取消按钮回调函数
function cancelModify():void{
    closePopup();
}
//定义返回按钮回调函数
function goBack():void{
    router.back();
}
//定义后端响应数据类型
interface ResponseData{
    success:boolean,
    data:BankInfo,
    id:number
}
//声明下单按钮的可用性状态
const allowStatus=ref<boolean>(true);
//定义下单按钮回调函数
function submitOrder(allow:boolean):void{
    // 当按钮不可用时
    if(!allow){
        return;
    }
    // 当按钮可用时设置节流
    allowStatus.value=false;
    setTimeout(()=>allowStatus.value=true,1000);
    // 获取下单时间
    orderInfo.getTime();
    // 往后端发送订单并接收库存校验信息以反馈下单状态
    axios.post(config.home,orderInfo.content)
        .then((response)=>{
            // 解包响应数据
            const {success,data,id}=response.data as ResponseData;
            //加载后端返回的订单编号
            orderInfo.useID(id);
            if(success){
            //更新全局状态-订单缓存
                orderCache.update(orderInfo.content);
            }else{
                //更新库存信息
                bankInfo.update(data);
            }
            //显示下单反馈
            router.push({'path':`finish/${success}`});
        }).catch((error)=>{
            // 弹出报错信息
            alert(error.message);
        });
}
</script>

<style lang="scss" scoped>
$text-height:5vw;
$margin:calc($text-height / 2.5);
$top-height:calc($text-height * 4);
$block-width:calc(100vw - $text-height * 2);
$textarea-width:calc($block-width - $text-height * 2);
$remark-height:calc($text-height * 4);
$bar-height:calc($text-height * 2);
$remark-bottom:calc($bar-height * 1.5);
$scroll-height:calc(100vh
    - ($text-height * 5) 
    - ($top-height + $margin * 1.25) 
    - ($remark-height + $text-height / 5 * 2 + $remark-bottom) 
);
@import '../styles/shoppingListStyle.scss';
/* 购物清单滚动列表布局 */
scroll-view{
    width:$block-width;
    height:$scroll-height;
    margin:$text-height;
}
/* 购物清单行样式布局 */
.dish-item-line{
    @extend %shopping-list;
}
/* 购物清单菜品名称列最大宽度 */
.dish-name{
    width:50vw;
}
/* 购物清单菜品数量、菜品价格样式布局 */
.dish-info{
    display:flex;
    width:30vw;
    justify-content:space-between;
    align-items: center;
}
/* 备注文本块布局样式 */
.remark{
    position:fixed;
    bottom:$remark-bottom;
    background-color: grey;
    height:$remark-height;
    width:$block-width;
    margin-left:$text-height;
    border-radius: calc($text-height / 2.5);
    padding: {
        top:calc($text-height / 5);
        bottom:calc($text-height / 5);
    }
}
/* 多行文本区域公共样式 */
textarea{
    margin-left:$text-height;
    width:$textarea-width;
}
/* 备注显示文本块样式 */
.remark-screen{
    height:$remark-height;
    color:white;
}
/* 弹出层按钮行布局 */
.popup-top-bar{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $text-height;
}
/* 备注修改文本块样式 */
.remark-modify{
    border: {
        width:1px;
        color:black;
        style:solid;
    }
}
/* 底栏按钮行布局样式 */
.bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height:$bar-height;
    width:100vw;
    position:fixed;
    bottom:2vw;
}
/* 底栏按钮公共样式 */
:global(.bar-button){
    font-size:$text-height;
    width:calc($text-height * 10);
    border: {
        style: solid;
        width: 1px;
    }
}
/* 返回按钮样式 */
:global(.return-button){
    background-color: white;
    color:green;
    border-color:grey;
}
/* 支付按钮样式 */
:global(.order-button){
    background-color: green;
    color:white;
    border-color: green;
}
</style>
